<template>
  <div>
    <h1>HOME</h1>
    <!--动态路由的参数传递 -->
    <!-- 使用params传递参数 -->
    <router-link to="/home/show/张三/56" tag="button">music</router-link>
    <router-link
      :to="{
        // path: '/home/show',
        name: 'Show',
        params: {
          // 使用params传递参数的时候,必填的数据必须要配置,否则会出现错误,不需要传值就写null占位
          name: '李四',
          age: null,
        },
        // 除了使用字符串拼外,也可以直接使用location字符串传递
        // 使用其中的params配置对象
        // 值得注意的是,如果使用arams对象传递参数,就不能使用path书写地址,只能使用name指向地址
      }"
      tag="button"
      >work</router-link
    >
    <router-link :to="{ name: 'Show' }" tag="button">play</router-link>
    <button @click="Navi">编程式跳转</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    Navi() {
      // this.$router.push({})
    },
  },
}
</script>

<style>
button {
  height: 30px;
  width: 100px;
  border: none;
}
.active {
  background: orange;
  color: #fff;
}
</style>
